<template>
	<view class="">
		<view :class="['scroll-popup', isShow ? 'scroll-open' : '', animation ? 'scroll-animation' : '']">
			<view class="scroll-box">
				<view class="scroll-top flex">
					<!-- <view class="scroll-top-left" @click="getResult('cancel')">取消</view>
					<view class="scroll-top-right" @click="getResult('confirm')" v-if="checkArr.length == tabList.length">确定</view> -->
					<view @click="changeTab(index)" class="tabItem" :class="tabIndex == index ? 'selecedTab' : '' " v-for="(item,index) of tabList" :key="index">
						{{ item.label }}
					</view>
				</view>
				<view class="gardeArea">
					<view @click="changeGrade(item,index)" class="gradeItem flex-all-center" :class="gradeIndex == index ? 'selectedGrade' : '' " v-for="(item,index) of gradeListd" :key="index">
						{{ item.name }}
					</view>
				</view>
				<view v-show="safeArea" class="scroll-temp"></view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view v-show="isShow" class="scroll-mask" @click.stop="isMask ? close() : ''"></view>
	</view>
</template>

<script>
	import api from "@/api/api.js"
	export default {
		props: {
			//是否点击阴影关闭
			isMask: {
				type: Boolean,
				default: true,
			},
			//是否开启动画
			animation: {
				type: Boolean,
				default: true,
			},
			//是否开启安全条
			safeArea: {
				type: Boolean,
				default: true,
			},
			gradeList:{
				type: Array,
				default: [],
			}
		},
		data () {
			return {
				isShow: false,
				tabIndex: 0,
				tabList: [{
					id: 1,
					label: '初中'
				},{
					id: 2,
					label: '高中'
				}],
				gradeIndex: null,
				gradeLists:[]
			}
		},
		computed: {
		    gradeListd() {
				if(this.gradeLists.length==0){
					return this.gradeList;
				}else{
					return this.gradeLists;
				}
		    }
		  },
		methods: {
			open() {
				this.isShow = true;
				this.tabIndex = 0
				this.gradeIndex = null
			},
			close() {
				this.isShow = false;
			},
			changeTab(index) {
				if (this.tabIndex == index) return
				this.tabIndex = index
				var obj = {
					stage:index==0?'初中':'高中'
				}
				api.getGrade(obj).then(res=>{
					this.gradeLists = res.data
				})
				this.gradeIndex = null
				console.log('gradeList', this.gradeLists)
			},
			changeGrade (item,index) {
				if(this.gradeIndex == index) return
				this.gradeIndex = index
				this.isShow = false
				this.$emit('change', {
					value: item
				})
			}
		}
	}
</script>

<style>
	/deep/ ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
</style>
<style lang="scss" scoped>
	.scroll-popup {
		width: 100%;
		position: fixed;
		bottom: -100%;
		z-index: 999;
	}
	
	.scroll-open {
		bottom: 0px !important;
	}
	.scroll-animation {
		transition: all 0.25s linear;
	}
	
	.scroll-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 998;
	}
	
	.scroll-box {
		padding: 0 40rpx 90rpx;
		position: absolute;
		bottom: 0;
		width: 100%;
		background: #ffff;
		border-radius: 24rpx 24rpx 0 0;
	}
	
	.scroll-temp {
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.scroll-top {
		height: 88rpx;
		line-height: 88rpx;
	}
	.tabItem {
		margin-right: 40rpx;
		color: #999999;
		font-weight: bold;
	}
	.selecedTab {
		color: #03A2EC;
	}
	
	.gardeArea {
		margin-top: 50rpx;
		.gradeItem {
			height: 90rpx;
			border-radius: 50rpx;
			border: 1rpx solid #ccc;
			color: #999999;
			font-weight: bold;
			&:nth-child(n+2) {
				margin-top: 30rpx;
			}
		}
		.selectedGrade {
			background: #03A2EC;
			color: #FFFFFF;
		}
	}
</style>